<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../static/css/base.css"/>
    <link rel="stylesheet" href="../static/css/index.css">
</head>
<body>

<div class="container-fluid">
    <div class="row" style="margin-top: 50px;">
        <p class="col-md-offset-1 title1" style="color: deepskyblue">基  本  信  息</p>
        <hr>
        <div class="col-md-6 col-md-offset-1">
            <form id="form1" class="form-horizontal" action="" method="post" enctype="multipart/form-data">
                <div class="form-group inputpadding">
                    <label for="input1" class="col-sm-2 control-label">头像</label>
                    <div class="col-sm-8">
                        <img src="/img/${info.userPicture}"alt="上传图片" id="input1fake" width="40px" height="40px">
                        <input type="file" class="form-control" name="userPicture" id="input1" placeholder="">
                    </div>
                </div>
                <div class="form-group inputpadding">
                    <label for="input2" class="col-sm-2 control-label">电话</label>
                    <div class="col-sm-8">
                        <p class="form-control" id="input2fake">${info.userNum}</p>
                        <input type="text" class="form-control" name="userNum" id="input2" placeholder="输入电话">
                    </div>
                </div>
                <div class="form-group inputpadding">
                    <label for="input3" class="col-sm-2 control-label">e-mail</label>
                    <div class="col-sm-8">
                        <p class="form-control" id="input3fake">${info.userEmail}</p>
                        <input type="text" class="form-control" name="userEmail" id="input3" placeholder="输入邮箱">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-8">
                        <button type="button" class="btn btn-danger col-md-12" onclick="edit()" id="button1">修改</button>
                        <button type="button" class="btn btn-danger col-md-12" onclick="save()" id="button2">保存</button>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-8">
                        <p id="warningtip" class="col-md-12" style="text-align: center;color: red" ></p>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row" style="margin-top: 30px; background-color: #f5f5f5;height: 150px;" >
        <div class="col-md-6 col-md-offset-3" >
            <div class="col-md-2" style="text-align: center;margin-top: 30px;">
                <a href="#">网站介绍</a>
            </div>
            <div class="col-md-2" style="text-align: center;margin-top: 30px;">
                <a href="#">酒店加盟</a>
            </div>
            <div class="col-md-2" style="text-align: center;margin-top: 30px;">
                <a href="#">职位招聘</a>
            </div>
            <div class="col-md-2" style="text-align: center;margin-top: 30px;">
                <a href="#">意见反馈</a>
            </div>
            <div class="col-md-2" style="text-align: center;margin-top: 30px;">
                <a href="#">联系我们</a>
            </div>
        </div>

    </div>

</div>

<script src="../static/bootstrap/js/jquery-3.3.1.js"></script>
<script>

    $('#input1').css('display','none')

    $('#input2').val("${info.userNum}")
    $('#input2').css('display','none')

    $('#input3').val("${info.userEmail}")
    $('#input3').css('display','none')

    $('#button2').css('display','none')

    function edit() {
        $('#input1').css('display','block')
        $('#input2fake').css('display','none')
        $('#input3fake').css('display','none')
        $('#input2').css('display','block')
        $('#input3').css('display','block')
        $('#button1').css('display','none')
        $('#button2').css('display','block')
    }

    function save() {

        $('#warningtip').text("")
        var file = document.getElementsByName("userPicture")[0].files[0]
        console.log(file)
        var tele = $('#input2').val()
        var email = $('#input3').val()

        if (file == "undefined"||file==null){
            file = null;
        }
        if (tele == "undefined"||tele==null||tele==""){
            $('#warningtip').text("电话不能为空")
            return;
        }
        if (tele.length!=11){
            $('#warningtip').text("电话长度有误")
            return;
        }
        if (email == "undefined"||email==null||email==""){
            $('#warningtip').text("邮箱不能为空")
            return;
        }
        if (email.length>35){
            $('#warningtip').text("邮箱应小于35字符")
            return;
        }

        var formData = new FormData();
        formData.append("userPicture",file)
        formData.append("userNum",tele)
        formData.append("userEmail",email)
        $.ajax({
            url:"/user/savebaseinfo",
            type:"post",
            processData: false, //jquery 是否对数据进行 预处理
            contentType: false, // 不要自己修改请求内容类型,
            data:formData,
            dataType:"text",
            success:function (data) {
                console.log(data)
                console.log("chenggong ")
                if(data!=null){

                    $('#input1').css('display','none')
                    $('#input2').css('display','none')
                    $('#input2fake').css('display','block')
                    $('#input3').css('display','none')
                    $('#input3fake').css('display','block')
                    $('#button2').css('display','none')
                    $('#button1').css('display','block')


                    $('#input1fake').attr('src',"/img/"+data);
                    console.log($('#input1fake').attr('src'))
                    $('#input2fake').text(tele)
                    $('#input3fake').text(email)
                    $('#warningtip').text("保存成功")

                } else if (data=="unlogin") {
                    alert("登录已失效，请重新登录")
                    window.top.location.href = "/login"
                }else {
                    $('#warningtip').text("保存失败")
                }
            }
        })






    }


</script>
</body>
</html>